<template>
  <div class="user-page">
    <div class="user">
      <van-image
        round
        width="70px"
        height="70px"
        fit="cover"
        :src="userInfo.avatar"
      />
      <p>{{ userInfo.name ? userInfo.name : userInfo.username }}</p>
    </div>
    <div class="grid">
      <van-grid :column-num="3">
        <van-grid-item icon="clock-o" text="历史记录" />
        <van-grid-item icon="bookmark-o" text="我的收藏" />
        <van-grid-item icon="thumb-circle-o" text="我的点赞" />
      </van-grid>
    </div>
    <div class="setting">
      <van-cell title="推荐分享" is-link />
      <van-cell title="意见反馈" is-link />
      <van-cell title="关于我们" is-link />
    </div>
    <van-button type="danger" block @click="logout">退出登录</van-button>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user'
import { delToken } from '@/utils/storage'
export default {
  name: 'UserPage',
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      const { data } = await getUserInfo()
      this.userInfo = data
    },
    logout () {
      delToken()
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.user-page {
  background: #f4f4f4;
  padding: 15px;
  height: 100vh;
  .user{
    margin: 30px 0;
    display: flex;
    // justify-content: center;
    align-items: center;
    p{
      margin-left: 20px;
      font-size: 24px;
    }
  }
  .grid{
    margin-bottom: 30px;
  }
  .setting{
    margin-bottom: 30px;
  }
}
</style>
